<template>
  <view class="analysis-container">
    <!-- 雪花效果 -->
    <view class="snowflakes">
      <view v-for="n in 20" :key="n" class="snowflake" :style="getSnowStyle(n)">❄️</view>
    </view>
    <!-- 加载状态 -->
    <view v-if="isLoading" class="loading-overlay">
      <view class="loading-animation">
        <view class="ball red"></view>
        <view class="ball yellow"></view>
        <view class="ball blue"></view>
        <view class="ball green"></view>
        <view class="ball purple"></view>
      </view>
      <text class="loading-text">AI正在分析照片，请稍候...</text>
    </view>

    <!-- 音乐列表 -->
    <view v-else class="music-list">
      <view v-for="(song, index) in musicList" :key="index" class="music-card">
        <view class="cover">
          <view class="cover-inner"></view>
        </view>
        <view class="info">
          <text class="song-name">{{ song.song_name }}</text>
          <text class="artist">{{ song.artist }}</text>
          <text class="recommend">{{ song.recommendation_reason }}</text>
        </view>
        <view class="play-btn" @click="playSong(song)"></view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const domain = "http://192.168.110.41:9002/"
const isLoading = ref(true)
const musicList = ref([])
const musicDetailList = ref([]) // 保存音乐详情

onLoad(() => {
  // 进入页面先清除上一次的播放数据
  uni.removeStorageSync('current_play_song')
  console.log(uni.getStorageSync('my_info'));
})

const playSong = (song) => {
  // 匹配音乐详情
  const detail = musicDetailList.value.find(item => {
    // 以歌曲名和歌手名联合匹配，防止重名
    return (
      (item.title && item.title.includes(song.song_name)) ||
      (item.title && item.title.includes(song.artist))
    )
  })
  if (detail) {
    // 跳转并携带数据
    uni.setStorageSync('current_play_song', detail)
    uni.setStorageSync('current_play_list', musicDetailList.value)
    uni.navigateTo({ url: '/pages/player/index' })
  } else {
    uni.showToast({ title: '未找到该歌曲资源', icon: 'none' })
  }
}

// 雪花样式生成
const getSnowStyle = (n) => {
  const left = Math.random() * 100;
  const duration = 6 + Math.random() * 6;
  const delay = Math.random() * 6;
  const size = 18 + Math.random() * 12;
  return `left:${left}vw;animation-duration:${duration}s;animation-delay:${delay}s;font-size:${size}px;`;
}

onMounted(() => {
  // 模拟加载过程
  uni.request({
    url: domain + 'api/Detailed_Rigorous_StyleAPI/',
    data: {
      prompt_json_text: JSON.stringify(uni.getStorageSync('my_info'))
    },
    method: 'GET',
    success: (res) => {
      if (res.data && res.data.code === 200 && res.data.data && Array.isArray(res.data.data.music_recommendations)) {
        musicList.value = res.data.data.music_recommendations
        uni.showLoading({ mask:true, title: "正在加载中" })
        uni.request({
          url: domain + "api/get_music/",
          method: "POST",
          data: {
            "music_list": JSON.stringify(musicList.value)
          },
          header: {
            "content-type": "application/x-www-form-urlencoded"
          },
          success: (res) => {
            if(res.data && res.data.code === 200 && Array.isArray(res.data.data)) {
              musicDetailList.value = res.data.data
            }
            console.log(res.data);
          },
          fail: (err) => {
            console.log(err);
          },
          complete: () => {
            uni.hideLoading()
          }
        })
      } else {
        // 兜底：无数据时用默认
        musicList.value = [
          { song_name: '夜曲', artist: '周杰伦', recommendation_reason: '经典华语流行曲目，旋律优美。' }
        ]
      }
    },
    fail: (err) => {
      console.log(err);
      musicList.value = [
        { song_name: '夜曲', artist: '周杰伦', recommendation_reason: '经典华语流行曲目，旋律优美。' }
      ]
    },
    complete: () => {
      isLoading.value = false
    }
  })
})
</script>

<style lang="scss" scoped>
.analysis-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #e0e7ff 0%, #f8fafc 100%);
  padding: 0;
  position: relative;
  overflow: hidden;
}

.snowflakes {
  pointer-events: none;
  position: fixed;
  left: 0; top: 0; width: 100vw; height: 100vh;
  z-index: 10;
}
.snowflake {
  position: absolute;
  top: -30px;
  opacity: 0.8;
  animation: snow-fall linear infinite;
  user-select: none;
}
@keyframes snow-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
  80% { opacity: 0.9; }
  100% { transform: translateY(100vh) rotate(360deg); opacity: 0.2; }
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

.loading-animation {
  position: relative;
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 40rpx;
}

.ball {
  position: absolute;
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  animation: rotate 2s linear infinite;
}

.red { background-color: #FF0000; }
.yellow { background-color: #FFFF00; }
.blue { background-color: #0000FF; }
.green { background-color: #00FF00; }
.purple { background-color: #800080; }

.ball:nth-child(1) { transform: rotate(0deg) translate(100rpx); }
.ball:nth-child(2) { transform: rotate(72deg) translate(100rpx); }
.ball:nth-child(3) { transform: rotate(144deg) translate(100rpx); }
.ball:nth-child(4) { transform: rotate(216deg) translate(100rpx); }
.ball:nth-child(5) { transform: rotate(288deg) translate(100rpx); }

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.loading-text {
  font-size: 1.2rem;
  color: #FFFFFF;
}

.music-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32rpx 24rpx;
  padding: 40rpx 0 40rpx 0;
}

.music-card {
  width: 88vw;
  max-width: 340px;
  background: linear-gradient(120deg, #e5f6ff 60%, #f0f4ff 100%);
  border-radius: 22px;
  margin-bottom: 0;
  padding: 28rpx 24rpx 24rpx 24rpx;
  box-shadow: 0 6px 24px 0 rgba(0, 64, 128, 0.08);
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  transition: box-shadow 0.2s;
  &:hover {
    box-shadow: 0 12px 32px 0 rgba(0, 64, 128, 0.16);
  }
}

.cover {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  background: #f0f0f0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) inset;
  margin-right: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cover-inner {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: linear-gradient(135deg, #dbeafe 60%, #e0e7ff 100%);
  box-shadow: 0 0 0 2px #fff inset;
}

.info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.song-name {
  font-size: 1.25rem;
  color: #003366;
  font-weight: 700;
  margin-bottom: 8rpx;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.artist {
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 2rpx;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.recommend {
  font-size: 0.92rem;
  color: #888;
  margin-top: 6rpx;
  line-height: 1.6;
  word-break: break-all;
}
.play-btn {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #007bff 60%, #66aaff 100%);
  border-radius: 50%;
  position: absolute;
  right: 24rpx;
  bottom: 24rpx;
  box-shadow: 0 2px 8px rgba(0,64,128,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
  &:active {
    transform: scale(1.12);
  }
}
</style> 